<template>
  <div class="roles">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="primary" style="margin-top: 15px;" @click="handelRolesDialog('添加角色')">添加角色</el-button>
    <el-table :data="rolesData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-row v-for="(item,index) in scope.row.children" :key="index">
              <el-col :span="4">
                  <el-tag closable @close="deleteRights(scope.row.id, item.id, scope.$index,index)">{{item.authName}}</el-tag>
                  <i class="el-icon-arrow-right"></i>
              </el-col>
              <el-col :span="20">
                  <el-row v-for="(_item, _index) in item.children" :key="_index">
                      <el-col :span="6">
                          <el-tag type="success" @close="deleteRights(scope.row.id, _item.id,scope.$index,index, _index)" closable >{{_item.authName}}</el-tag>
                          <i class="el-icon-arrow-right"></i>
                      </el-col>
                      <el-col :span="18">
                          <el-tag type="warning" v-for="(__item, __index) in _item.children" :key="__index"  @close="deleteRights(scope.row.id, __item.id, scope.$index,index, _index, __index)" closable >{{__item.authName}}</el-tag>
                      </el-col>
                  </el-row>
              </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index" label="#" width="50"></el-table-column>
      <el-table-column label="角色列表" prop="roleName"></el-table-column>
      <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
      <el-table-column label="操作">
          <template slot-scope="scope">
              <el-button
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="handelRolesDialog('编辑角色', scope.row)"
            circle
          ></el-button>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click.native="handleDelete(obj.row.id)"
            circle
          ></el-button>
          <el-button
            type="success"
            size="small"
            icon="el-icon-check"
            @click.native="handleDistribute(obj.row)"
            circle
          ></el-button>
          </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="600px">
      <el-form :model="rolesForm" ref="rolesForm" :rules="rolesFormRules" label-width="120px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="rolesForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="rolesForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleRoles">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addRoles, getRolesLists,deleteRights,editRole } from '../../http/apis'
export default {
  data() {
    return {
      rolesData: [],
      dialogVisible: false,
      rolesForm: {
          roleName: '',
          roleDesc: ''
      },
      rolesFormRules: {
          roleName: [
              {
                  required: true,
                  message: '请输入角色名称',
                  trigger: 'blur'
              }
          ],
          roleDesc: []
      },
      title: '添加角色'
    };
  },
  methods: {
      async addRoles() {
          return await addRoles(this.rolesForm)
      },
     async handleRoles() {
       this.$refs.rolesForm.validate( async valite => {
         if(valite){
           if(this.title === '添加角色') {
              await this.addRoles()
           }else {
             await this.editRole()
           }
           
          this.dialogVisible = false
          this.$refs.rolesForm.resetFields()
          this.getRolesLists()
         }else {
           return false;
         }
       })
          
      },
      async getRolesLists() {
          const res = await getRolesLists()
          this.rolesData = res
          this.$forceUpdate()
      },
      async deleteRights(roleId, rightId, index1, index2, index3, index4) {
          await deleteRights(roleId, rightId)
          if(arguments.length == 4) {
              this.rolesData[index1].children.splice(index2, 1)
          }else if(arguments.length == 5) {
              this.rolesData[index1].children[index2].children.splice(index3, 1)
          }else {
              this.rolesData[index1].children[index2].children[index3].children.splice(index4, 1)
          }
      },
      async editRole() {
        await editRole(this.rolesForm)
      },
      handelRolesDialog(title, role) {
        this.title = title
        this.dialogVisible = true
        this.$nextTick(()=>{
          this.$refs.rolesForm.resetFields()
          role && (this.rolesForm = Object.assign(this.rolesForm, {roleName: role.roleName, roleDesc: role.roleDesc, id: role.id}))
        })
      }
  },
  created() {
      this.getRolesLists()
  }
};
</script>
<style>
.roles {
  background-color: #fff;
  border-radius: 5px;
  padding: 15px;
}
</style>